<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width,height=device-height,
    user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1,target-densitydpi=device-dpi ">
    <title>My WebSocket</title>
    <script th:src="@{js/jquery-3.3.1.min.js}"></script>
</head>
<style>
    .car{
        width: 100%;
    }
</style>
<body>
<div class="cqr">
    <input id="username" placeholder="用户名"><br>
    <input id="text" type="text" /><button onclick="send()">Send</button>
    <div id="message">
    </div>
</div>
</body>
<script>
    // 生成随机姓名
    function getName(){
        var familyNames = new Array(
            "赵",    "钱",    "孙",    "李",    "周",    "吴",    "郑",    "王",    "冯",    "陈",
            "褚",    "卫",    "蒋",    "沈",    "韩",    "杨",    "朱",    "秦",    "尤",    "许",
            "何",    "吕",    "施",    "张",    "孔",    "曹",    "严",    "华",    "金",    "魏",
            "陶",    "姜",    "戚",    "谢",    "邹",    "喻",    "柏",    "水",    "窦",    "章",
            "云",    "苏",    "潘",    "葛",    "奚",    "范",    "彭",    "郎",    "鲁",    "韦",
            "昌",    "马",    "苗",    "凤",    "花",    "方",    "俞",    "任",    "袁",    "柳",
            "酆",    "鲍",    "史",    "唐",    "费",    "廉",    "岑",    "薛",    "雷",    "贺",
            "倪",    "汤",    "滕",    "殷",    "罗",    "毕",    "郝",    "邬",    "安",    "常",
            "乐",    "于",    "时",    "傅",    "皮",    "卞",    "齐",    "康",    "伍",    "余",
            "元",    "卜",    "顾",    "孟",    "平",    "黄",    "和",    "穆",    "萧",    "尹"
        );
        var givenNames =  new Array(
            "子璇", "淼", "国栋", "夫子", "瑞堂", "甜", "敏", "尚", "国贤", "贺祥", "晨涛",
            "昊轩", "易轩", "益辰", "益帆", "益冉", "瑾春", "瑾昆", "春齐", "杨", "文昊",
            "东东", "雄霖", "浩晨", "熙涵", "溶溶", "冰枫", "欣欣", "宜豪", "欣慧", "建政",
            "美欣", "淑慧", "文轩", "文杰", "欣源", "忠林", "榕润", "欣汝", "慧嘉", "新建",
            "建林", "亦菲", "林", "冰洁", "佳欣", "涵涵", "禹辰", "淳美", "泽惠", "伟洋",
            "涵越", "润丽", "翔", "淑华", "晶莹", "凌晶", "苒溪", "雨涵", "嘉怡", "佳毅",
            "子辰", "佳琪", "紫轩", "瑞辰", "昕蕊", "萌", "明远", "欣宜", "泽远", "欣怡",
            "佳怡", "佳惠", "晨茜", "晨璐", "运昊", "汝鑫", "淑君", "晶滢", "润莎", "榕汕",
            "佳钰", "佳玉", "晓庆", "一鸣", "语晨", "添池", "添昊", "雨泽", "雅晗", "雅涵",
            "清妍", "诗悦", "嘉乐", "晨涵", "天赫", "玥傲", "佳昊", "天昊", "萌萌", "若萌"
        );

        var i = parseInt(10 * Math.random())*10 + parseInt(10 * Math.random());
        var familyName = familyNames[i];

        var j = parseInt(10 * Math.random())*10 + parseInt(10 * Math.random());
        var givenName = givenNames[i];

        var name = familyName + givenName;
        return name;
    }
    document.getElementById('username').value=getName();
</script>
<script type="text/javascript">
    var websocket = null;
    //判断当前浏览器是否支持WebSocket
    if('WebSocket' in window){
        websocket = new WebSocket("ws://123.207.37.11:8080/websocket");
        // websocket = new WebSocket("ws://localhost:8080/websocket");
    }
    else{
        alert('Not support websocket')
    }
    //连接发生错误的回调方法
    websocket.onerror = function(){
        setMessageInnerHTML("error");
    };

    //连接成功建立的回调方法
    websocket.onopen = function(event){
        var message = document.getElementById('username').value+"进入了房间！";
        websocket.send(message);
    }

    //接收到消息的回调方法
    websocket.onmessage = function(event){
        setMessageInnerHTML(event.data);
    }

    //连接关闭的回调方法
    websocket.onclose = function(){
        setMessageInnerHTML("close");
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function(){
        var message = document.getElementById('username').value+"离开了房间！";
        websocket.send(message);
        websocket.close();
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML){
        $('#message').prepend(innerHTML+'<br/>')
    }

    //关闭连接
    function closeWebSocket(){
        var message = document.getElementById('username').value+"离开了房间！";
        websocket.send(message);
        websocket.close();
    }

    //发送消息
    function send(){
        var message = document.getElementById('username').value+":"+document.getElementById('text').value;
        websocket.send(message);
    }
</script>
<script>
    function getMousePosition(event) {
        var e = event || window.event;
        var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
        var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
        var x = e.pageX || e.clientX + scrollX;
        var y = e.pageY || e.clientY + scrollY;
        return { 'x': x, 'y': y };
    }
    function showBig(position) {
        var oBig=$('<div style="position:absolute">Big</div>');
        oBig.css({
            'left':position.x+'px',
            'top':position.y+'px',
            'font-size':'18px',
            'font-weight':'blod',
            'color':'red'
        });
        oBig.appendTo('body');
        oBig.animate({
            'top':position.y+40+'px',
            'opacity':'0.3'
        },function () {
            oBig.remove();
        })
    }
    document.onclick=function (ev) {
        showBig(getMousePosition(ev));
    }
</script>
</html>